<template>
    <view style="position: relative;">
        <view class="title fb f34 p20" style="position: absolute; top: 0;  right: 0;  z-index: 999; color: white;background: green;
    font-size: 15px; border-radius: 20px;" @click="logout">退出</view>
        <up-swiper height="350rpx" :list="data.list"></up-swiper>

        <view v-if="!data.user.oubi">
            <view class="title fb f34 p20">经营数据</view>
            <up-tabs lineColor='#3f59a7' :list="data.tabs" @click="setCur" :current='data.current' :scrollable='false'></up-tabs>
            <view class="menu mt20 d-b-c mb40">
                <view @click="store.commit('jump', `/pages/list/list?type=${index + 1}`)" class="flex-1 tc" v-for="(item, index) in data.menu" :key="index">
                    <view class="f50 fb">{{ item.num }}</view>
                    <view class="sub f28">{{ item.name }}</view>
                </view>
            </view>
            <view class="d-b-c p20 mb20" v-if="data.data">
                <view class="item">进入新会员：<text class="f34 red">{{ data.data.members_num }}</text> </view>
                <view class="item">可用积分：<text class="f34 red">{{ data.data.total_score }}</text> </view>
            </view>
        </view>
        <view v-else class="tip white p20 f24" style="text-align: center;margin: 60px;background: green;" @click="store.commit('jump', `/pages/list/list?type=1`)">查看数据</view>
        <!-- <view class="tip white p20 f24">7.30-8.30限时兑换欧比产品</view>
        <view class="list p20 d-f">
            <view class="item mr10 d-s-s d-c p20">
                <view class="f32 fb">品牌任务</view>
                <view class="mt10">
                    <up-tag shape="circle" bgColor="#3f59a7" text="点击进入" size="mini" borderColor="transparent"></up-tag>
                </view>
                <view class="logo flex-1 ww100 d-e-e">
                    <image src="@/static/logo.png" mode="widthFix"></image>
                </view>
            </view>
            <view class="flex-1">
                <view class="item item1 d-s-s d-c p20">
                    <view class="f32 fb">品牌任务</view>
                    <view class="mt10">
                        <up-tag shape="circle" bgColor="#3f59a7" text="点击进入" size="mini" borderColor="transparent"></up-tag>
                    </view>
                    <view class="logo flex-1 ww100 d-e-e">
                        <image src="@/static/logo.png" mode="widthFix"></image>
                    </view>
                </view>
                <view class="item item1 d-s-s d-c mt10 p20">
                    <view class="f32 fb">品牌任务</view>
                    <view class="mt10">
                        <up-tag shape="circle" bgColor="#3f59a7" text="点击进入" size="mini" borderColor="transparent"></up-tag>
                    </view>
                    <view class="logo flex-1 ww100 d-e-e">
                        <image src="@/static/logo.png" mode="widthFix"></image>
                    </view>
                </view>
            </view>
        </view> -->
        <view class="box p20">
            <view class="charts-box">
                <view class="f32 fb mb20">积分统计</view>
                <view class="d-b-c">
                    <view class="flex-1 mr20">
                        <u-button text="年" :color="data.type1=='year'?'#3f59a7':''" @click="setType('type1','year')"></u-button>
                    </view>
                    <view class="flex-1 mr20">
                        <u-button text="月" :color="data.type1=='month'?'#3f59a7':''" @click="setType('type1','month')"></u-button>
                    </view>
                    <view class="flex-1">
                        <u-button text="日" :color="data.type1=='day'?'#3f59a7':''" @click="setType('type1','day')"></u-button>
                    </view>
                </view>
                <view class="d-b-c mt20">
                    <picker class="flex-1" mode="date" @change="setDate('date1',$event)">
                        <view class="ww100 tc" v-if="data.date1">{{data.date1}}</view>
                        <view class="ww100 tc sub" v-else>开始日期</view>
                    </picker>
                    <view class="ml10 mr10"> - </view>
                    <picker class="flex-1" mode="date" @change="setDate('date2',$event)">
                        <view class="ww100 tc" v-if="data.date2">{{data.date2}}</view>
                        <view class="ww100 tc sub" v-else>结束日期</view>
                    </picker>
                    <view class="btn">
                        <u-button text="筛选" @click="shuaxin(1)"></u-button>
                    </view>
                </view>
                <qiun-data-charts type="line" :ontouch="true" :opts="data.opts" :chartData="data.chartData" />
            </view>
        </view>

        <view class="box p20">
            <view class="charts-box">
                <view class="f32 fb mb20">门店统计</view>
                <view class="d-b-c">
                    <view class="flex-1 mr20">
                        <u-button text="年" :color="data.type2=='year'?'#3f59a7':''" @click="setType('type2','year')"></u-button>
                    </view>
                    <view class="flex-1 mr20">
                        <u-button text="月" :color="data.type2=='month'?'#3f59a7':''" @click="setType('type2','month')"></u-button>
                    </view>
                    <view class="flex-1">
                        <u-button text="日" :color="data.type2=='day'?'#3f59a7':''" @click="setType('type2','day')"></u-button>
                    </view>
                </view>
                <view class="d-b-c mt20">
                    <picker class="flex-1" mode="date" @change="setDate('date3',$event)">
                        <view class="ww100 tc" v-if="data.date3">{{data.date3}}</view>
                        <view class="ww100 tc sub" v-else>开始日期</view>
                    </picker>
                    <view class="ml10 mr10"> - </view>
                    <picker class="flex-1" mode="date" @change="setDate('date4',$event)">
                        <view class="ww100 tc" v-if="data.date4">{{data.date4}}</view>
                        <view class="ww100 tc sub" v-else>结束日期</view>
                    </picker>
                    <view class="btn">
                        <u-button text="筛选" @click="shuaxin(2)"></u-button>
                    </view>
                </view>
                <qiun-data-charts type="line" :ontouch="true" :opts="data.opts" :chartData="data.chartData2" />
            </view>
        </view>

        <view class="box p20">
            <view class="charts-box">
                <view class="f32 fb mb20">经销商统计</view>
                <view class="d-b-c">
                    <view class="flex-1 mr20">
                        <u-button text="年" :color="data.type3=='year'?'#3f59a7':''" @click="setType('type3','year')"></u-button>
                    </view>
                    <view class="flex-1 mr20">
                        <u-button text="月" :color="data.type3=='month'?'#3f59a7':''" @click="setType('type3','month')"></u-button>
                    </view>
                    <view class="flex-1">
                        <u-button text="日" :color="data.type3=='day'?'#3f59a7':''" @click="setType('type3','day')"></u-button>
                    </view>
                </view>
                <view class="d-b-c mt20">
                    <picker class="flex-1" mode="date" @change="setDate('date5',$event)">
                        <view class="ww100 tc" v-if="data.date5">{{data.date5}}</view>
                        <view class="ww100 tc sub" v-else>开始日期</view>
                    </picker>
                    <view class="ml10 mr10"> - </view>
                    <picker class="flex-1" mode="date" @change="setDate('date6',$event)">
                        <view class="ww100 tc" v-if="data.date6">{{data.date6}}</view>
                        <view class="ww100 tc sub" v-else>结束日期</view>
                    </picker>
                    <view class="btn">
                        <u-button text="筛选" @click="shuaxin(3)"></u-button>
                    </view>
                </view>
                <qiun-data-charts type="line" :ontouch="true" :opts="data.opts" :chartData="data.chartData3" />
            </view>
        </view>
    </view>

</template>
<script setup>
import {
    reactive
} from 'vue'
import {
    onLoad
} from "@dcloudio/uni-app";
import {
    useStore
} from "vuex"
const store = useStore()
const data = reactive({
    date1: '',
    date2: '',
    date3: '',
    date4: '',
    date5: '',
    date6: '',
    type1: 'day',
    type2: 'day',
    type3: 'day',
    chartData: {
        categories: [],
        series: [{
            name: "积分统计",
            data: []
        }]
    },
    chartData2: {
        categories: [],
        series: [{
            name: "门店统计",
            data: []
        }]
    },
    chartData3: {
        categories: [],
        series: [{
            name: "经销商统计",
            data: []
        }]
    },
    opts: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
            "#ea7ccc"
        ],
        // width:392,
        // height:400,
        padding: [15, 15, 0, 15],
        enableScroll: true,
        xAxis: {
            disableGrid: true,
            scrollShow: true,
            itemCount: 4
        },
        // type:'straight',
        extra: {
            area: {
                type: "straight",
                width: 2,
                activeType: "hollow"
            }
        }
    },
    list: [
        // 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        // 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        // 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
    ],
    tabs: [{
        name: '本月数据'
    },
    {
        name: '全部数据'
    },
    ],
    current: 0,
    menu: [{
        num: 0,
        name: "经销商"
    }, {
        num: 0,
        name: "门店"
    }, {
        num: 0,
        name: "积分"
    }],
    user: {},
})

function setDate(name, e) {
    data[name] = e.detail.value
}

function shuaxin(i) {
    if (i == 1) getJifen()
    if (i == 2) getMendian()
    if (i == 3) getAgent()
}

function setType(name, value) {
    data[name] = value
    if (name == 'type1') getJifen()
    if (name == 'type2') getMendian()
    if (name == 'type3') getAgent()
}

function logout() {
    uni.removeStorageSync('userinfo')
    uni.removeStorageSync('token')
    store.commit('jump', '/pages/login/login')
}


async function getData() {
    const res = await store.dispatch('request', {
        url: store.state.api.statistics.userCount,
        data: {
            is_all: data.current
        }
    })
    if (res.code == 1) {
        data.data = res.data
        data.menu[0].num = res.data.agent_count
        data.menu[1].num = res.data.store_count
        data.menu[2].num = res.data.score,
            data.list = res.data.slideshow;
    }
}
async function getJifen() {
    // return
    if (data.type1 == 'year' || data.type1 == 'month') {
        data.date1 = '';
        data.date2 = '';
    }
    const res = await store.dispatch('request', {
        url: store.state.api.statistics.scoreCount,
        data: {
            start_time: data.date1,
            end_time: data.date2,
            type: data.type1
        }
    })
    if (res.code == 1) {
        // console.log(res.data);
        data.chartData.categories = res.data.time
        data.chartData.series[0].data = res.data.after_point
        // data.data = res.data
    }
}
async function getMendian() {
    if (data.type2 == 'year' || data.type2 == 'month') {
        data.date3 = '';
        data.date4 = '';
    }
    const res = await store.dispatch('request', {
        url: store.state.api.statistics.storeCount,
        data: {
            start_time: data.date3,
            end_time: data.date4,
            type: data.type2
        }
    })
    if (res.code == 1) {
        // console.log(res.data);
        data.chartData2.categories = res.data.time
        data.chartData2.series[0].data = res.data.after_point
        // data.data = res.data
    }
}
async function getAgent() {
    if (data.type3 == 'year' || data.type3 == 'month') {
        data.date5 = '';
        data.date6 = '';
    }
    const res = await store.dispatch('request', {
        url: store.state.api.statistics.agentCount,
        data: {
            start_time: data.date5,
            end_time: data.date6,
            type: data.type3
        }
    })
    if (res.code == 1) {
        // console.log(res.data);
        data.chartData3.categories = res.data.time
        data.chartData3.series[0].data = res.data.after_point
        // data.data = res.data
    }
}
function setCur(e) {
    data.current = e.index
    getData()
}
onLoad(() => {
    data.user = uni.getStorageSync('userinfo')
    getData()
    getJifen()
    getMendian()
    getAgent()
})
</script>
<style scoped lang="scss">
.charts-box {
  width: 100%;
  // height: 300px;
}

.list {
  background-color: #f6f6f6;

  .item {
    width: calc(50% - 10rpx);
    background-color: #fff;
    border-radius: 10rpx;
    background-position: right bottom;
    background-repeat: no-repeat;

    image {
      width: 50%;
    }
  }

  .item1 {
    width: 100%;
  }
}

.tip {
  background-color: #3f59a7;
}
</style>